<template>
  <div class="app-container">
    <div>
      <div class="searchGroup_list" style="padding: 0px 0px 10px 0px;margin: 0px 0px 0px 0px;">
      <el-row :gutter="20">
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="8">
                <span class="searchListName">公司名称: </span>
              </el-col>
              <el-col :span="14">
                <el-input size="small" v-model="listQuery.condition.companyName.value" placeholder="请输入公司名称" :clearable="true"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="8">
                <span class="searchListName">供应商编码: </span>
              </el-col>
              <el-col :span="14">
                <el-input size="small" v-model="listQuery.condition.supplierCode.value" placeholder="请输入供应商编码" :clearable="true"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <div style="display: inline-block;text-align: right;width: 100%;padding-top: 11px;">
            <el-button type="primary" size="mini" class="size" icon="el-icon-search" @click="getList('find')">搜索</el-button>
            <el-button type="primary" size="mini" class="size" icon="el-icon-circle-close-outline" @click="handleReset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  
      <div style="position: relative;border: 1px solid #ccc;padding:0px 0px 54px 0px;margin:0px 0px 0px 0px;position: relative;">
        <el-table :key='tableKey' :data="list" v-loading="listLoading"
                  element-loading-text="给我一点时间"
                  size="small"
                  height="380px"
                    highlight-current-row style="width: 100%;">
            <el-table-column align="center" label="序号" min-width="50px" type="index">
              <template slot-scope="scope">
              <span>{{scope.$index + (serialNumber - 1) * 10 + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="供应商编码" min-width="120px" prop="supplierCode">
                <template slot-scope="scope">
                    <span>{{scope.row.supplierCode}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="公司名称" min-width="200px" prop="companyName">
                <template slot-scope="scope">
                    <span>{{scope.row.companyName}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="公司简称" width="200px" prop="companyAbbreviation">
                <template slot-scope="scope">
                    <span>{{scope.row.companyAbbreviation}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="联系电话" width="200px" prop="telephone">
                <template slot-scope="scope">
                    <span>{{scope.row.telephone}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操 作" width="260" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button style="margin-left:5px;" type="text" size="small" @click="toView(scope.row)">查看</el-button>
                    <el-button style="margin-left:5px;" type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <!--编辑MDM供应商信息弹出层-->
    <el-dialog
      v-if="dialogVisibleDetail"
      :close-on-click-modal="false"
      title="单据详细"
      :visible.sync="dialogVisibleDetail"
      @close='getList'
      width="70%">
      <mdmSupplierDetail :openType="openType" :formId="formId" @changeCloseDialog="changeCloseDialog"></mdmSupplierDetail>
    </el-dialog>
    <!--查看MDM供应商信息弹出层-->
    <el-dialog
      v-if="viewIsDisplay"
      :close-on-click-modal="false"
      title="单据查看"
      :visible.sync="viewIsDisplay"
      @close='getList'
      width="70%">
      <mdmSupplierView :openType="openType" :handlingType="handlingType" :formId="formId" @changeCloseDialog="changeCloseDialog"></mdmSupplierView>
    </el-dialog>
  </div>
</template>
<script>
import '@/styles/newstyle.scss'
import {
  Select
} from '@/api/basicInfo/mdmSupplier'
import mdmSupplierDetail from './components/mdmSupplierDetail'
import mdmSupplierView from './components/mdmSupplierView'
export default {
  components: {
    mdmSupplierDetail,
    mdmSupplierView
  },
  data() {
    return {
      // table list
      tableKey: 0,
      list: null,
      listQuery: {
        rowBounds: {
          offset: 0,
          limit: 10
        },
        condition: {
          supplierCode: {
            property: 'supplierCode',
            value: '',
            type: 'LIKE'
          },
          companyName: {
            property: 'companyName',
            value: '',
            type: 'LIKE'
          },
          isDeleted: {
            property: 'isDeleted',
            value: '0',
            type: 'EQ'
          }
        },
        fields: [],
        sort: [
          {
            direction: 'ASC',
            property: 'createTime'
          }
        ]
      },
      listLoading: false,
      dialogVisibleDetail:false,
      viewIsDisplay:false,
      serialNumber:1,
      openType: '',
      formId: '',
      handlingType: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList(flag) {
    this.listLoading = true
    this.listQuery.orgId = this.$store.getters.orgId
    if (flag === 'find') {
      this.listQuery.rowBounds.offset = 0
      this.serialNumber = 1
      this.total = 0
    }
    if (flag ==='delete') {
      if (this.listQuery.rowBounds.offset == (this.total - 1)
        && this.listQuery.rowBounds.offset >= this.listQuery.rowBounds.limit) {
        this.listQuery.rowBounds.offset -=this.listQuery.rowBounds.limit
        if (this.serialNumber * this.listQuery.rowBounds.limit >= this.total) {
          this.serialNumber -=1
        }
      }
    }
    const that = this
    this.listQuery.isExist = 1
    Select(this.listQuery).then(response => {
      this.list = response.data.data.records
      this.total = response.data.data.count
      this.listLoading = false
    })
  },
  //重置
  handleReset() {
      this.listQuery.condition.supplierCode.value = ''
      this.listQuery.condition.companyName.value = ''
      this.listQuery.rowBounds.offset = 0
      this.listQuery.rowBounds.limit = 10
      this.serialNumber =1
      this.list = null
      this.total = 0
      this.getList()
    },
  // 翻页器使用
    handleSizeChange(val) {
      this.listQuery.rowBounds.limit = val
      this.getList()
    },
    // 翻页器使用
    handleCurrentChange(val) {
      this.serialNumber = val
      this.listQuery.rowBounds.offset =
        this.listQuery.rowBounds.limit * (val - 1)
      this.getList()
    },
  //查看
  toView(row) {
      this.viewIsDisplay = true
      this.formId = row.mdmSupplierId
      this.openType = 'view'
    },
  //编辑  
  handleEdit(row) {
        this.formId = row.mdmSupplierId
        this.dialogVisibleDetail = true
        this.openType = 'edit'
      },
  //关闭页面
  changeCloseDialog() {
      this.dialogVisibleDetail = false
      this.getList()
    },
  }
}
</script>

<style scoped>
.tree-title{
    font-size: 16px;
    padding:10px 10px 10px 20px;
    border-bottom: 1px solid #ccc;
  }
  .size{
    padding:4px;
  }
  .tree-detail{
    padding: 10px 0 80px 15px;
  }
  .notSize .el-table__empty-text{
    display: none;
  }
  .tableBtnBox >>> .el-button.is-circle{
    padding: 8px !important;
  }

  .searchBoxList{
    margin-top: 10px;
  }
  .searchGroup_list .searchListName{
    font-size: 14px;
    color: #333333;
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
  }
  .searchGroup_list .searchListNameOther{
    font-size: 14px;
    color: #333333;
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
    text-align: center;
    padding-left: 20%;
    padding-right: 20%;
  }
</style>
